<!--
 * @Description: 文件上传组件
 * @Author: chendingfengmail@163.com
 * @Date: 2021-11-02 13:58:43
 * @LastEditTime: 2022-01-17 10:04:12
 * @LastEditors: chendingfengmail@163.com
 * @Reference: 
-->
<template>
	<div class="dd-upload">
		<el-upload ref="dUploadSelect" action="" :file-list="list" :multiple="multiple" :list-type="listType" :limit="limit"
		 :show-file-list="showFileList" :before-upload="beforeUpload" :on-exceed="onExceed" :on-remove="onRemove"
		 :http-request="httpRequest" :disabled="disabled">
			<div slot="tip" class="el-upload__tip">
				<div class="dd-upload-explain">{{explain}}</div>
			</div>
			<i slot="default" class="el-icon-plus"></i>
			<div slot="file" slot-scope="{file}" v-if="listType==='picture-card'">
				<img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
				{{listShowChange(file)}}
				<span class="el-upload-list__item-actions">
					<span class="el-upload-list__item-preview" @click="viewMagnifyImage(file.url)">
						<i class="el-icon-zoom-in"></i>
					</span>
					<span class="el-upload-list__item-delete" v-if="!disabled" @click="removeImage(file)">
						<i class="el-icon-delete"></i>
					</span>
				</span>
			</div>
			<slot></slot>
		</el-upload>
		<el-dialog title="图片" :visible.sync="magnifyImageShow" append-to-body>
			<div class="preview-image">
				<img :src="imageUrl" alt="">
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'dd-upload',
		model: {
			prop: 'file',
			event: 'change'
		},
		props: {
			file: {},
			explain: String, //提示信息
			limit: { //数量
				type: Number,
				default: 1
			},
			multiple: { //是否多文件
				type: Boolean,
				default: false
			},
			size: { //大小，默认2M
				type: Number,
				default: 2048
			},
			list: { //默认列表
				type: Array,
				default: function() {
					return [];
				}
			},
			listType: { //显示类型
				type: String,
				default: 'text'
			},
			accept: { //上传文件类型
				type: [Array, String],
				default: function() {
					return [];
				}
			},
			showFileList: { //是否显示文件列表
				type: Boolean,
				default: true
			},
			listShow: { //是否显示文件列表，picture-card
				type: Boolean,
				default: true
			},
			disabled: { // 是否禁用
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				magnifyImageShow: false,
				imageUrl: ''
			};
		},
		created() {
			if(this.disabled) {
				// 禁用状态下 数据加载完毕后 隐藏上传框
				this.$nextTick(() => {
					this.showUpload('hidden');
				})
			} else {
				// 非禁用状态下 数据加载完毕后 根据文件列表长度判断是否隐藏上传框
				this.$nextTick(() => {
					if(this.list.length >= this.limit) {
						this.showUpload('hidden');
					}
				})
			}
		},
		methods: {
			//删除文件
			onRemove: function(file, fileList) {
				if (this.multiple) {
					this.$emit('change', fileList);
				} else {
					this.$emit('change', '');
				}
				this.showUpload('visible');
				this.$emit('validateField');
				this.$emit('remove');
			},

			//文件上传前
			beforeUpload(file) {
				//判断上传文件类型
				var type = file.name.substring(file.name.lastIndexOf('.') + 1);
				if (this.accept.indexOf(type) === -1 && this.accept.length !== 0) {
					this.$message.warning(`请选择 ${this.accept.join(' / ')} 类型的文件`);
					return false;
				}

				//判断上传文件大小
				if (this.size < file.size / 1024) {
					let m = (this.size / 1024).toFixed(2);
					let size = m >= 1 ? (m + 'M') : (this.size + 'KB');
					this.$message.warning(`文件大小不能超过 ${size}`);
					return false;
				}

				this.showUpload('hidden');
			},

			//上传文件数量限制
			onExceed: function() {
				this.$message.warning(`只能选择${this.limit}个文件`);
			},

			//删除图片
			removeImage: function(file) {
				this.$refs['dUploadSelect'].handleRemove(file);
			},

			//清除文件
			clearFiles: function() {
				this.$refs['dUploadSelect'].clearFiles();
			},

			//自定义上传文件
			httpRequest: function({
				file
			}) {
				if (this.multiple) {
					this.file.push(file);
				} else {
					this.$emit('change', file);
					this.$emit('httpRequest', file);
				}
				this.$emit('validateField');
			},

			//隐藏上传图片组件
			showUpload: function(value) {
				this.$refs.dUploadSelect.$el.childNodes[1].style.visibility = value;
			},
			
			//获取文件信息
			listShowChange:function(file){
				console.log(file);
				console.log(file.name);
				return '';
			},

			//查看图片
			viewMagnifyImage: function(url) {
				let index = url.indexOf('blob:');
				if (index === -1) {
					this.imageUrl = url + '?prevType=Y';
				} else {
					this.imageUrl = url;
				}
				this.magnifyImageShow = true;
			}
		},
		watch: {
			'list.length'(n, l) {
				if (this.list.length === this.limit) {
					this.showUpload('hidden');
				}
			},
			listShow() {
				console.log(this.listShow);
			}
		}
	}
</script>

<style scoped>
	.el-upload__tip {
		line-height: 21px;
		margin-top: 0px;
	}

	.preview-image {
		text-align: center;
	}

	.preview-image img {
		max-width: 500px;
		max-height: 500px;
	}

	.dd-upload-explain {
		font-size: 13px;
		color: #999;
		margin-top: 5px;
	}

	.el-upload-list__item-thumbnail {
		width: 146px;
		height: 146px;
		object-fit: contain;
	}
</style>
